<template>
  <view class="card-view">
    <view class="card-title">
      <view class="title-left">
        <image src="/static/pc/IntegralI-icon.png" class="left-image"></image>
        NZJFDD100000002
      </view>
      <view class="title-right">待平台确认</view>
    </view>
    <view class="integra-info">
      <view class="integra-left">
        <image src="/static/pc/IntegralI-item.png" class="left-image"></image>
      </view>
      <view class="integra-right">
        <view class="right-one"
          >大连美早大樱桃新鲜现货国产整箱5斤礼盒装备份</view
        >
        <view class="right-two">6瓶/箱</view>
        <view class="right-three"
          >数量:
          <span style="color: #4d0f0b; font-size: 14px; margin-left: 4px"
            >3</span
          ></view
        >
        <view class="right-four"
          >2999
          <span style="font-size: 12px; margin-left: 4px">积分</span></view
        >
      </view>
    </view>
    <view class="integra-bot">
      <view class="bot-left">2024.08.22 18:00</view>
      <view class="bot-right">
        <el-button class="bot-button">取消兑换</el-button>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style scoped lang="scss">
.card-view {
  width: 100%;
  height: 227px;
  padding: 12px 14px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e8ded6;
  .card-title {
    @extend .row-between;
    .title-left {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #69442e;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      @extend .row-start;
      .left-image {
        width: 16px;
        height: 16px;
        margin-right: 2px;
      }
    }
    .title-right {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #b8aca3;
      line-height: 20px;
      text-align: center;
      font-style: normal;
    }
  }
  .integra-info {
    margin-top: 12px;
    padding: 12px 0;
    border-top: 1px solid #f7e8e4;
    border-bottom: 1px solid #f7e8e4;
    @extend .row-start;
    .integra-left {
      height: 107px;
      .left-image {
        width: 107px;
        height: 100%;
      }
    }
    .integra-right {
      height: 107px;
      margin-left: 10px;
      .right-one {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #2c1101;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
      .right-two {
        margin-top: 8px;
        border-radius: 4px;
        width: 45px;
        height: 20px;
        border: 1px solid #fe5950;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #fe5950;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        @extend .row;
      }
      .right-three {
        margin-top: 8px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #b7a09a;
        line-height: 17px;
        text-align: left;
        font-style: normal;
      }
      .right-four {
        margin-top: 4px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #ec4725;
        line-height: 28px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .integra-bot {
    margin-top: 8px;
    @extend .row-between;
    .bot-left {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #b8aca3;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
    .bot-right {
      .bot-button {
        @extend .row;
        width: 79px;
        height: 31px;
        border-radius: 4px;
        border: 1px solid #2c1101;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #2c1101;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
</style>